import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { ListItemState } from '../home'
import { Swiper, Image, Typography, Button, Space, Card, Rate, ActionBar, Stepper } from 'react-vant'
import { CartO, ChatO, ShopO } from '@react-vant/icons';
import { useDispatch } from 'react-redux';
import { addCarItemCreateAction } from '../../store/car/car'
import { addListCreateAction } from '../../store/history/history'
const Index = () => {
	const location = useLocation()
	const v = location.state as ListItemState
	const dispatch = useDispatch()
	const [count, setCount] = useState<string |number>(1);
	const addCar = () => {
		dispatch(addCarItemCreateAction({
			url: v.url,
			title: v.title,
			desc: v.desc,
			price: v.price,
			id: v.id,
			isCheck: false,
			count: +count
		}))
	}

	useEffect(() => {
		dispatch(addListCreateAction(v))
	}, [])

	return (
		<div>
			{/* 轮播 */}
			<Swiper>
				{v.banner.map((image) => (
					<Swiper.Item key={image}>
						<Image lazyload src={image} width='100%' />
					</Swiper.Item>
				))}
			</Swiper>
			<Typography.Title level={1}>{v.title}</Typography.Title>
			<Typography.Text>{v.desc}</Typography.Text>
			<Typography.Text type="danger">单价：￥{v.price}</Typography.Text>

			<Typography.Title level={5}>
				数量：
				<Stepper value={count} onChange={ count => setCount
				(count) }></Stepper>
				
			</Typography.Title>

			{/* 评论 */}
			<Card>
				<Card.Header>评论</Card.Header>
				<Card.Body>
				{
					v.message.map((v, i) => {
						return <dl key={v.id}>
							<dt style={{ display: 'flex', alignItems: 'center' }}>
								<img src={v.url} alt="" style={{ borderRadius: '50%' }}/>
								<b style={{ margin: '0 4px' }}>{ v.nickname }</b>
								<Rate value={v.count}></Rate>
							</dt>
							<dd>
								<Typography.Text>{ v.content }</Typography.Text>
								<p>评论时间：{ v.datetime }</p>
							</dd>
						</dl>
					})
				}
				</Card.Body>
			</Card>

			{/* 底部 */}
			<ActionBar>
        <ActionBar.Icon icon={<ChatO />} text="客服" onClick={() => console.log('chat click')} />
        <ActionBar.Icon icon={<CartO />} text="购物车" onClick={() => console.log('cart click')} />
        <ActionBar.Icon icon={<ShopO />} text="店铺" onClick={() => console.log('shop click')} />
        <ActionBar.Button type="danger" text="立即购买" onClick={() => addCar()} />
      </ActionBar>
		</div>
	)
}


export default Index